リンクのテクニック（2）
リンクの小技の第2回目は、リンク文字に引かれるアンダーラインの改良です。ちょっとした工夫を施すだけで、アンダーラインを消去したり、文字の上にポインタが来たときだけラインを表示するように変更することができます。

→ リンクのアンダーラインを表示しない
 
リンクが張られている文字には、自動的にアンダーラインが引かれます。しかし、ページのデザイン上、これをなくしたい場合もあるでしょう。このようなときは、Aタグのスタイルシートを変更し、アンダーラインを非表示にしましょう。HEAD内に、「A:link {text-decoration:none}」「A:visited {text-decoration:none}」「A:active {text-decoration:none}」という3つのスタイルシートを記述すると、アンダーラインは非表示になります。
<HTML>

<TITLE>インフォシーク ホームページ作成</TITLE>

<HEAD>
<STYLE type="text/css">
  <!--
    A:link {text-decoration:none}
    A:visited {text-decoration:none}
    A:active {text-decoration:none}
  -->
</STYLE>
</HEAD>

<BODY>
・<A href="http://www.infoseek.co.jp/">infoseek</A><BR>
・<A href="http://www.rakuten.co.jp/">楽天</A><BR>
・<A href="http://isweb.www.infoseek.co.jp/">isweb</A><BR>
・<A href="http://iswebmag.hp.infoseek.co.jp/">魅せるホームページ作成講座</A>
</BODY>

</HTML>

→ リンクの上下にラインを表示させる
 
とはいえ、通常の文字とリンクが張られている文字に全く差がないのは少し不親切です。そこで、ポインタがリンク上に来たときだけ、文字にラインを表示させるようにしてみましょう。ここでは、ちょっと変化をつけて、文字の上下にラインを引くようにします。これは、先ほどのスタイルシートに「A:hover {text-decoration:underline overline}」を追加することで実現できます。
<HTML>

<TITLE>インフォシーク ホームページ作成</TITLE>

<HEAD>
<STYLE type="text/css">
  <!--
    A:link {text-decoration:none}
    A:visited {text-decoration:none}
    A:active {text-decoration:none}
    A:hover {text-decoration:underline overline}
  -->
</STYLE>
</HEAD>

<BODY>
・<A href="http://www.infoseek.co.jp/">infoseek</A><BR>
・<A href="http://www.rakuten.co.jp/">楽天</A><BR>
・<A href="http://isweb.www.infoseek.co.jp/">isweb</A><BR>
・<A href="http://iswebmag.hp.infoseek.co.jp/">魅せるホームページ作成講座</A>
</BODY>

</HTML>


→ リンクをラインで囲む
 
さらに、ポインタがリンク上に来たときだけ、文字全体をラインで囲むこともできます。この場合は、Aタグのスタイルシートを「A:hover {border-width:1px; border-style:solid; dding:2}」と記述します。
<HTML>

<TITLE>魅せるホームページ作成講座</TITLE>

<HEAD>
<STYLE type="text/css">
  <!--
    A:link {text-decoration:none}
    A:visited {text-decoration:none}
    A:active {text-decoration:none}
    A:hover {border-width:1px; border-style:solid}
  -->
</STYLE>
</HEAD>

<BODY>
・<A href="http://www.infoseek.co.jp/">infoseek</A><BR>
・<A href="http://www.rakuten.co.jp/">楽天</A><BR>
・<A href="http://isweb.www.infoseek.co.jp/">isweb</A><BR>
・<A href="http://iswebmag.hp.infoseek.co.jp/">魅せるホームページ作成講座</A>
</BODY>

</HTML>


�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��